import React, { useState, useEffect } from 'react';
import { Input, Select, Button, Pagination, Spin, Empty, message, Card, Row, Col, Tag, Breadcrumb, Space, Skeleton } from 'antd';
import { useError } from '../../components/ui/ErrorHandler';
import { useLoading } from '../../components/ui/LoadingManager';
import { 
  SearchOutlined, 
  FilterOutlined, 
  PhoneOutlined, 
  AppstoreOutlined,
  UnorderedListOutlined,
  HomeOutlined,
  ShoppingOutlined,
  StarFilled,
  EyeOutlined,
  CheckCircleOutlined,
  TrophyOutlined,
  HeartOutlined,
  ShareAltOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { productApi } from '../../services/api';
import { Product, ProductProcess } from '../../types';
import ContactModal from '../../components/ui/ContactModal';
import BackToTop from '../../components/ui/BackToTop';
import { ProductCard } from '../../components/business';
import { PRODUCT_TYPES, PRODUCT_TYPE_LABELS } from '../../constants';
import { toast } from 'sonner';

const { Search } = Input;
const { Option } = Select;

// 添加CSS样式
const styles = `
  .pagination-enhanced .ant-pagination-item {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin: 0 4px;
    transition: all 0.2s;
  }
  
  .pagination-enhanced .ant-pagination-item-active {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-color: #3b82f6;
  }
  
  .pagination-enhanced .ant-pagination-item-active a {
    color: white;
  }
  
  .pagination-enhanced .ant-pagination-prev,
  .pagination-enhanced .ant-pagination-next {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
  }
  
  .pagination-enhanced .ant-pagination-prev:hover,
  .pagination-enhanced .ant-pagination-next:hover {
    border-color: #3b82f6;
  }
  
  .pagination-enhanced .ant-pagination-item:hover {
    border-color: #3b82f6;
    transform: translateY(-1px);
  }
`;

// 注入样式
if (typeof document !== 'undefined') {
  const styleElement = document.createElement('style');
  styleElement.textContent = styles;
  document.head.appendChild(styleElement);
}

interface ProductFilters {
  search: string;
  type: string;
  materials: string[];
  priceRange: string;
  processes: string[];
}

const ProductPage: React.FC = () => {
  const navigate = useNavigate();
  const { showError } = useError();
  const { withLoading } = useLoading();
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 12,
    total: 0
  });
  const [contactModalOpen, setContactModalOpen] = useState(false);
  const [processes, setProcesses] = useState<ProductProcess[]>([]);
  const [processesLoading, setProcessesLoading] = useState(false);
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
  
  const [filters, setFilters] = useState<ProductFilters>({
    search: '',
    type: '',
    materials: [],
    priceRange: '',
    processes: []
  });

  // 材质选项
  const materialOptions = [
    { label: '不锈钢', value: '不锈钢' },
    { label: '铝合金', value: '铝合金' },
    { label: '碳钢', value: '碳钢' },
    { label: '铜', value: '铜' },
    { label: '钛合金', value: '钛合金' },
    { label: '塑料', value: '塑料' },
    { label: '陶瓷', value: '陶瓷' }
  ];

  // 价格区间选项
  const priceRangeOptions = [
    { label: '100元以下', value: '0-100' },
    { label: '100-500元', value: '100-500' },
    { label: '500-1000元', value: '500-1000' },
    { label: '1000-5000元', value: '1000-5000' },
    { label: '5000元以上', value: '5000-999999' }
  ];

  useEffect(() => {
    handleSearch();
  }, []);

  // 调试：监听products状态变化
  useEffect(() => {
    // console.log('🔄 ProductPage - products状态变化:', products);
    // console.log('📏 ProductPage - products数组长度:', products.length);
  }, [products]);



  const fetchProducts = async (params: any) => {
    try {
      setLoading(true);
      const response = await withLoading(
        productApi.getProducts(params),
        '正在加载产品列表...'
      );
      
      setProducts(response.products || []);
      setPagination({
        page: params.page || 1,
        limit: params.limit || 12,
        total: response.total || 0
      });
    } catch (error) {
      console.error('获取产品列表失败:', error);
      showError(error instanceof Error ? error : '获取产品列表失败', {
        modal: false,
        details: '请检查网络连接或稍后重试'
      });
      // 设置空数组作为后备
      setProducts([]);
      setPagination({
        page: 1,
        limit: 12,
        total: 0
      });
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    const searchParams: any = {
      page: 1,
      limit: 12
    };

    if (filters.search) {
      searchParams.search = filters.search;
    }
    if (filters.type) {
      searchParams.type = filters.type;
    }
    if (filters.materials.length > 0) {
      searchParams.materials = filters.materials;
    }
    if (filters.priceRange) {
      const [min, max] = filters.priceRange.split('-').map(Number);
      searchParams.priceMin = min;
      searchParams.priceMax = max;
    }
    if (filters.processes.length > 0) {
      searchParams.processes = filters.processes;
    }

    fetchProducts(searchParams);
  };

  const handleFilterChange = (key: keyof ProductFilters, value: any) => {
    setFilters(prev => ({
      ...prev,
      [key]: value
    }));
  };

  const handlePageChange = (page: number) => {
    const searchParams: any = {
      page,
      limit: 12
    };

    if (filters.search) searchParams.search = filters.search;
    if (filters.type) searchParams.type = filters.type;
    if (filters.materials.length > 0) searchParams.materials = filters.materials;
    if (filters.priceRange) {
      const [min, max] = filters.priceRange.split('-').map(Number);
      searchParams.priceMin = min;
      searchParams.priceMax = max;
    }
    if (filters.processes.length > 0) searchParams.processes = filters.processes;

    fetchProducts(searchParams);
  };

  const clearFilters = () => {
    setFilters({
      search: '',
      type: '',
      materials: [],
      priceRange: '',
      processes: []
    });
    fetchProducts({ page: 1, limit: 12 });
  };

  const handleFavorite = (product: any) => {
    toast.success(`已收藏 ${product.name}`);
  };

  const handleShare = (product: any) => {
    if (navigator.share) {
      navigator.share({
        title: product.name,
        text: product.description,
        url: window.location.href
      });
    } else {
      navigator.clipboard.writeText(window.location.href);
      toast.success('链接已复制到剪贴板');
    }
  };

  const handleQuickView = (product: any) => {
    toast.info(`查看 ${product.name} 详情`);
  };

  const getProductTypeLabel = (type: string) => {
    return PRODUCT_TYPE_LABELS[type] || type;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50">
      {/* Hero区域 - 响应式优化 */}
      <div className="relative bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 text-white py-8 sm:py-12 lg:py-16">
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="absolute inset-0" style={{
          backgroundImage: `url('/images/product_bg.jpg')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          opacity: 0.3
        }}></div>
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-4 sm:mb-6">
            <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-2 sm:mb-3 bg-gradient-to-r from-white via-blue-100 to-purple-100 bg-clip-text text-transparent drop-shadow-lg">产品中心</h1>
            <p className="text-base sm:text-lg md:text-xl text-blue-100 max-w-2xl mx-auto px-4">专业广告制作，品质保证，为您提供一站式解决方案</p>
          </div>
          
          {/* 面包屑导航 - 响应式优化 */}
          <div className="flex justify-center">
            <Breadcrumb
              separator={<span className="text-blue-200">/</span>}
              items={[
                {
                  href: '/',
                  title: (
                    <div className="flex items-center gap-1 text-blue-200 hover:text-white text-sm sm:text-base">
                      <HomeOutlined />
                      <span>首页</span>
                    </div>
                  ),
                },
                {
                  title: (
                    <div className="flex items-center gap-1 text-white text-sm sm:text-base">
                      <ShoppingOutlined />
                      <span>产品中心</span>
                    </div>
                  ),
                },
              ]}
            />
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        {/* 搜索和筛选区域 - 响应式优化 */}
        <div className="bg-white rounded-lg shadow-sm overflow-hidden mb-6 sm:mb-8">
          <div className="bg-gradient-to-r from-blue-50 to-purple-50 px-3 sm:px-4 lg:px-6 py-2 sm:py-3 lg:py-4 border-b">
            <h2 className="text-base sm:text-lg lg:text-xl font-semibold text-gray-900 flex items-center gap-1 sm:gap-2 lg:gap-3">
              <FilterOutlined className="text-blue-500 text-sm sm:text-base" />
              产品筛选
            </h2>
            <p className="text-gray-600 mt-1 text-xs sm:text-sm lg:text-base">快速找到您需要的产品</p>
          </div>
          
          <div className="p-3 sm:p-4 lg:p-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-2 sm:gap-3 lg:gap-4">
              {/* 搜索框 */}
              <div className="sm:col-span-2 xl:col-span-2">
                <Search
                  placeholder="搜索产品名称或描述"
                  value={filters.search}
                  onChange={(e) => handleFilterChange('search', e.target.value)}
                  onSearch={handleSearch}
                  enterButton={<SearchOutlined />}
                  size={window.innerWidth < 640 ? 'middle' : 'large'}
                  className="hover:shadow-md transition-shadow"
                />
              </div>

              {/* 产品类型筛选 */}
              <Select
                placeholder="产品类型"
                value={filters.type || ''}
                onChange={(value) => handleFilterChange('type', value)}
                size={window.innerWidth < 640 ? 'middle' : 'large'}
                allowClear
                className="hover:shadow-md transition-shadow"
              >
                {PRODUCT_TYPES.map(type => (
                  <Option key={type.value} value={type.value}>{type.label}</Option>
                ))}
              </Select>

              {/* 材质筛选 */}
              <Select
                mode="multiple"
                placeholder="材质"
                value={filters.materials}
                onChange={(value) => handleFilterChange('materials', value)}
                size={window.innerWidth < 640 ? 'middle' : 'large'}
                maxTagCount={window.innerWidth < 640 ? 0 : 1}
                className="hover:shadow-md transition-shadow"
              >
                {materialOptions.map(material => (
                  <Option key={material.value} value={material.value}>{material.label}</Option>
                ))}
              </Select>

              {/* 价格区间筛选 */}
              <Select
                placeholder="价格区间"
                value={filters.priceRange || ''}
                onChange={(value) => handleFilterChange('priceRange', value)}
                size={window.innerWidth < 640 ? 'middle' : 'large'}
                allowClear
                className="hover:shadow-md transition-shadow"
              >
                {priceRangeOptions.map(range => (
                  <Option key={range.value} value={range.value}>{range.label}</Option>
                ))}
              </Select>

              {/* 工艺筛选 */}
              <Select
                mode="multiple"
                placeholder="工艺"
                value={filters.processes}
                onChange={(value) => handleFilterChange('processes', value)}
                size={window.innerWidth < 640 ? 'middle' : 'large'}
                loading={processesLoading}
                maxTagCount={window.innerWidth < 640 ? 0 : 1}
                className="hover:shadow-md transition-shadow"
              >
                {processes.map(process => (
                  <Option key={process.id} value={process.id}>{process.name}</Option>
                ))}
              </Select>
            </div>

            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-3 sm:mt-4 lg:mt-6 gap-2 sm:gap-3 lg:gap-4">
              <div className="flex flex-wrap gap-2 w-full sm:w-auto">
                <Button
                  type="primary"
                  icon={<FilterOutlined />}
                  onClick={handleSearch}
                  size={window.innerWidth < 640 ? 'middle' : 'large'}
                  className="bg-gradient-to-r from-blue-500 to-purple-500 border-none shadow-lg hover:shadow-xl flex-1 sm:flex-none text-sm sm:text-base"
                >
                  筛选
                </Button>
                <Button
                  onClick={clearFilters}
                  size={window.innerWidth < 640 ? 'middle' : 'large'}
                  className="hover:shadow-md transition-shadow flex-1 sm:flex-none text-sm sm:text-base"
                >
                  清空筛选
                </Button>
                
                {/* 视图切换 */}
                <Space.Compact size={window.innerWidth < 640 ? 'middle' : 'large'}>
                  <Button
                    type={viewMode === 'grid' ? 'primary' : 'default'}
                    icon={<AppstoreOutlined />}
                    onClick={() => setViewMode('grid')}
                    className="hidden sm:inline-flex"
                  >
                    网格
                  </Button>
                  <Button
                    type={viewMode === 'grid' ? 'primary' : 'default'}
                    icon={<AppstoreOutlined />}
                    onClick={() => setViewMode('grid')}
                    className="sm:hidden"
                  />
                  <Button
                    type={viewMode === 'list' ? 'primary' : 'default'}
                    icon={<UnorderedListOutlined />}
                    onClick={() => setViewMode('list')}
                    className="hidden sm:inline-flex"
                  >
                    列表
                  </Button>
                  <Button
                    type={viewMode === 'list' ? 'primary' : 'default'}
                    icon={<UnorderedListOutlined />}
                    onClick={() => setViewMode('list')}
                    className="sm:hidden"
                  />
                </Space.Compact>
              </div>
              
              <div className="flex items-center gap-4 w-full sm:w-auto justify-center sm:justify-end">
                <div className="text-gray-500 text-xs sm:text-sm lg:text-base">
                  共找到 <span className="font-semibold text-blue-600">{pagination.total}</span> 个产品
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 产品列表 - 响应式优化 */}
        {loading ? (
          <div className={viewMode === 'grid' ? 
            "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-3 lg:gap-4 xl:gap-6 mb-4 sm:mb-6 lg:mb-8" : 
            "space-y-2 sm:space-y-3 lg:space-y-4 mb-4 sm:mb-6 lg:mb-8"
          }>
            {Array.from({ length: 12 }).map((_, index) => (
              <Card key={index} className="overflow-hidden">
                <Skeleton.Image className="w-full h-24 sm:h-32 lg:h-40 xl:h-48" active />
                <div className="p-2 sm:p-3 lg:p-4">
                  <Skeleton active paragraph={{ rows: 2 }} />
                </div>
              </Card>
            ))}
          </div>
        ) : products.length === 0 ? (
          <div className="bg-white rounded-lg shadow-sm p-6 sm:p-8 lg:p-12">
            <Empty
              description="暂无产品数据"
              image={Empty.PRESENTED_IMAGE_SIMPLE}
            />
          </div>
        ) : (
          <>
            <div className={viewMode === 'grid' ? 
              "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-3 lg:gap-4 xl:gap-6 mb-4 sm:mb-6 lg:mb-8" : 
              "space-y-2 sm:space-y-3 lg:space-y-4 mb-4 sm:mb-6 lg:mb-8"
            }>
              {products.map((product) => (
                viewMode === 'grid' ? (
                  <Card
                    key={product.id}
                    hoverable
                    className="overflow-hidden group transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 border-0 shadow-lg cursor-pointer h-auto flex flex-col bg-gradient-to-br from-white to-gray-50 rounded-xl"
                    onClick={() => navigate(`/products/${product.id}`)}
                    styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column' } }}
                  >
                    {/* 图片区域 - 紧凑4:3比例 */}
                    <div className="relative overflow-hidden rounded-t-xl" style={{ aspectRatio: '4/3' }}>
                      <img
                        src={product.images?.[0] || `https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=${encodeURIComponent(`professional ${product.name} advertising product, modern design, high quality`)}&image_size=landscape_4_3`}
                        alt={product.name}
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                        onError={(e) => {
                          e.currentTarget.src = '/placeholder-product.jpg';
                        }}
                      />
                      
                      {/* 渐变遮罩 */}
                      <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                      
                      {/* 分类标签 - 右上角 */}
                      <div className="absolute top-3 right-3">
                        <Tag className="text-sm border-0 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold shadow-lg px-3 py-1.5 rounded-full backdrop-blur-sm max-w-[100px] truncate">
                          {getProductTypeLabel(product.type)}
                        </Tag>
                      </div>
                      
                      {/* 热销标签 - 左上角 */}
                      {product.isHot && (
                        <div className="absolute top-3 left-3">
                          <div className="bg-gradient-to-r from-red-500 to-pink-600 text-white px-3 py-1.5 rounded-full text-sm font-semibold flex items-center gap-1.5 shadow-lg backdrop-blur-sm">
                            <StarFilled className="text-xs" />热销
                          </div>
                        </div>
                      )}
                    </div>
                    
                    {/* 内容区域 - 优化布局 */}
                    <div className="p-2 sm:p-3 lg:p-4 flex flex-col flex-grow">
                      <h3 className="font-bold text-gray-900 line-clamp-2 mb-2 sm:mb-3 text-sm sm:text-base lg:text-lg leading-tight group-hover:text-blue-700 transition-colors duration-300">{product.name}</h3>
                      
                      {/* 特点标签 */}
                      {product.features && product.features.length > 0 && (
                        <div className="flex flex-wrap gap-1 sm:gap-2 mb-2 sm:mb-3">
                          {product.features.slice(0, window.innerWidth < 640 ? 2 : 3).map((feature, index) => (
                            <span key={`${product.id}-feature-${index}-${feature}`} className="inline-block bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 text-xs sm:text-sm px-2 sm:px-3 py-1 sm:py-1.5 rounded-full font-medium border border-blue-100">
                              {feature}
                            </span>
                          ))}
                        </div>
                      )}
                      
                      <p className="text-gray-600 text-xs sm:text-sm line-clamp-2 leading-relaxed flex-grow">{product.description}</p>
              
                    </div>
                  </Card>
                ) : (
                  <Card
                    key={product.id}
                    hoverable
                    className="overflow-hidden group transition-all duration-300 hover:shadow-xl border-0 shadow-md cursor-pointer"
                    onClick={() => navigate(`/products/${product.id}`)}
                  >
                    <Row gutter={16} align="middle">
                      <Col xs={24} sm={6} md={4}>
                        <div className="aspect-[2/3] overflow-hidden rounded-lg relative bg-gradient-to-br from-gray-100 to-gray-200">
                          <img
                            src={product.images?.[0] || `https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=${encodeURIComponent(`professional ${product.name} advertising product, modern design, high quality`)}&image_size=portrait_4_3`}
                            alt={product.name}
                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                            onError={(e) => {
                              e.currentTarget.src = '/placeholder-product.jpg';
                            }}
                          />
                          {product.isHot && (
                            <div className="absolute top-2 left-2">
                              <div className="bg-gradient-to-r from-red-500 to-pink-500 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
                                <StarFilled />热销
                              </div>
                            </div>
                          )}
                        </div>
                      </Col>
                      <Col xs={24} sm={18} md={20}>
                        <div className="flex flex-col h-full justify-between p-3 sm:p-4">
                          <div>
                            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-2 sm:mb-3 gap-2">
                              <h3 className="text-base sm:text-lg lg:text-xl font-semibold text-gray-900 line-clamp-2 flex-1">{product.name}</h3>
                              <div className="text-left sm:text-right flex-shrink-0">
                                <div className="text-lg sm:text-xl font-bold text-blue-600">
                                  {product.price ? `¥${product.price}` : '询价'}
                                </div>
                                <div className="text-xs sm:text-sm text-gray-500">/{product.unit || '件'}</div>
                              </div>
                            </div>
                            <p className="text-sm sm:text-base text-gray-600 mb-2 sm:mb-3 line-clamp-2 leading-relaxed">{product.description}</p>
                            <div className="mb-2 sm:mb-3">
                              <Tag className="border-0 bg-blue-50 text-blue-600 font-medium text-xs sm:text-sm max-w-[120px] truncate inline-block">
                                {getProductTypeLabel(product.type)}
                              </Tag>
                            </div>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </Card>
                )
              ))}
            </div>

            {/* 分页 */}
            {pagination.total > pagination.limit && (
              <div className="flex justify-center mb-8 sm:mb-12">
                <div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 border border-gray-100 w-full sm:w-auto">
                  <Pagination
                    current={pagination.page}
                    total={pagination.total}
                    pageSize={pagination.limit}
                    onChange={handlePageChange}
                    showSizeChanger={false}
                    showQuickJumper={window.innerWidth > 640}
                    showTotal={(total, range) => (
                      <div className="text-center mb-3 sm:mb-4">
                        <span className="text-gray-600 text-sm sm:text-base">
                          显示第 <span className="font-semibold text-blue-600">{range[0]}-{range[1]}</span> 条，
                          共 <span className="font-semibold text-blue-600">{total}</span> 条产品
                        </span>
                      </div>
                    )}
                    className="pagination-enhanced"
                    size={window.innerWidth < 640 ? 'small' : 'default'}
                  />
                </div>
              </div>
            )}
          </>
        )}

        {/* CTA区域 */}
        <div className="bg-gradient-to-r from-blue-50 to-purple-50 p-6 sm:p-8 lg:p-12 text-center rounded-2xl mt-8 sm:mt-12 mb-6 sm:mb-8">
          <div className="max-w-4xl mx-auto">
            <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3 mb-4 sm:mb-6">
              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center">
                <TrophyOutlined className="text-white text-lg sm:text-xl" />
              </div>
              <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">需要定制化解决方案？</h2>
            </div>
            <p className="text-base sm:text-lg lg:text-xl text-gray-600 mb-6 sm:mb-8 leading-relaxed max-w-2xl mx-auto px-4">
              我们的专业团队拥有丰富的行业经验，将为您提供个性化的产品定制服务，
              从设计到生产，全程为您保驾护航
            </p>
            
            {/* 服务亮点 */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
              <div className="bg-white rounded-xl p-4 sm:p-6 shadow-sm border border-gray-100">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                  <CheckCircleOutlined className="text-white text-lg sm:text-xl" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-1 sm:mb-2 text-sm sm:text-base">专业定制</h3>
                <p className="text-gray-600 text-xs sm:text-sm">根据需求量身定制</p>
              </div>
              <div className="bg-white rounded-xl p-4 sm:p-6 shadow-sm border border-gray-100">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                  <TrophyOutlined className="text-white text-lg sm:text-xl" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-1 sm:mb-2 text-sm sm:text-base">品质保证</h3>
                <p className="text-gray-600 text-xs sm:text-sm">严格质量控制体系</p>
              </div>
              <div className="bg-white rounded-xl p-4 sm:p-6 shadow-sm border border-gray-100">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                  <StarFilled className="text-white text-lg sm:text-xl" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-1 sm:mb-2 text-sm sm:text-base">贴心服务</h3>
                <p className="text-gray-600 text-xs sm:text-sm">全程跟踪服务支持</p>
              </div>
            </div>
            
            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
              <Button
                type="primary"
                size={window.innerWidth < 640 ? 'middle' : 'large'}
                icon={<PhoneOutlined />}
                className="bg-blue-600 hover:bg-blue-700 border-0 text-white font-semibold px-6 sm:px-8 py-2 sm:py-3 h-auto shadow-lg text-sm sm:text-base"
                onClick={() => setContactModalOpen(true)}
              >
                立即联系我们
              </Button>
              <Button
                size={window.innerWidth < 640 ? 'middle' : 'large'}
                className="border-blue-200 text-blue-600 hover:bg-blue-50 font-semibold px-6 sm:px-8 py-2 sm:py-3 h-auto text-sm sm:text-base"
                onClick={() => navigate('/cases')}
              >
                查看成功案例
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 联系模态框 */}
      <ContactModal
        open={contactModalOpen}
        onClose={() => setContactModalOpen(false)}
      />

      {/* 返回顶部 */}
      <BackToTop />
    </div>
  );
};

export default ProductPage;